<template>
    <section>
        <div class="div_f">
            <el-form label-width="80px">

                <el-form-item label="期望货期">
                    <el-date-picker v-model="currObj[dataType].expTime" type="datetime" placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="样衣款号">
                    <el-input v-model='currObj[dataType].modelNo' placeholder="请输入款号" style="width: 100px;"></el-input>
                </el-form-item>

                <el-form-item label="大货预计" v-if="dataType=='proof'">
                    <el-col style="width: 100px" >
                        <el-input-number placeholder="0" :controls='false' style="width: 100%;"  v-model="currObj.proof.bulkNum"></el-input-number>
                    </el-col>
                    <el-col :span="10">
                        <div class="lb1">{{getUnitName(currObj.unitId)}}</div>
                    </el-col>




                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model='currObj[dataType].memo' placeholder="备注" style="width: 600px;"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <!--<el-table :data="currObj[dataType].data" style="width: 100%">
            <el-table-column label="颜色" width="180">
                <template scope="scope">
                    <el-input v-model='scope.row.colorName' placeholder="0" style="width: 100px;"></el-input>
                </template>
            </el-table-column>


            <el-table-column :key='sizeId' v-for='(sizeId,index) in currObj[dataType].sizeIdArray' :label="getSizeName(sizeId)">
                <template scope="scope">
                    <el-input v-model.number='scope.row.sizeArray[index].num' placeholder="0" style="width: 50px;"></el-input>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template scope="scope">
                    <el-button type="text" @click="RemoveColor(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>-->
        <table class="t1">
            <thead>
                <tr>
                    <th>颜色</th>
                    <th v-for='(sizeId,index) in currObj[dataType].sizeIdArray' v-text="getSizeName(sizeId)">
                    </th>
                    <th>操作</th>
                </tr>

            </thead>
            <tbody>
                <tr v-for='(color,colorIndex) in currObj[dataType].data'>
                    <td>
                        <el-input v-model='color.colorName' placeholder="0" style="width: 100px;"></el-input>
                    </td>
                    <td v-for='(size,index) in color.sizeArray'>
                        <el-input-number placeholder="0" class="txt_num" :controls='false' v-model="size.num"></el-input-number>
                    </td>
                    <td>
                        <el-button type="text" @click="RemoveColor(colorIndex, currObj[dataType].data)">删除</el-button>
                    </td>
                </tr>
            </tbody>

        </table>
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-popover ref="popover5" placement="top" width="260" v-model="showAddColor">
                <el-form :inline="true">
                    <el-form-item>
                        <el-input v-model='newColor' placeholder="颜色名称"></el-input>

                    </el-form-item>
                    <el-form-item>


                        <el-button type="primary" @click="addNewColor()">确定</el-button>

                    </el-form-item>
                </el-form>


            </el-popover>

            <el-button v-popover:popover5>新颜色</el-button>


            <el-popover ref="popover6" placement="top" width="360">
                <el-form :inline="true">
                    <div>
                        <el-checkbox-group v-model="currObj[dataType].sizeIdArray" @change="sizeChange">
                            <template v-for="size in getAllSize()">
                                <hr v-if="size.bg==1" />
                                <span class='sp_size'><el-checkbox  :label="size.id" :key="size.id">{{size.name}}</el-checkbox></span>
                            </template>




                        </el-checkbox-group>
                    </div>




                </el-form>


            </el-popover>
            <el-button v-popover:popover6>修改尺码</el-button>
            <!--这里早晚要重写,用select是悲剧的-->



        </el-col>
    </section>

</template>
<script src="./colorSizeData.js"></script>
<style>
    .txt_num {
        width: 50px;
        vertical-align: middle;
    }

    .sp_size {
        display: inline-block;
        width: 100px;
        line-height: 25px;
    }

    table.t1 {
        border-collapse: collapse;
        width: 100%;
        border: 1px solid #cad9ea;
    }

    table.t1 thead {
        border: 1px solid #cad9ea;
        background-color: #eee;
    }

    table.t1 th {
        text-align: center;
        border: 1px solid #cad9ea;
        line-height: 40px;
    }

    table.t1 td {
        text-align: center;
        border: 1px solid #cad9ea;
        line-height: 60px;
    }

    table.t1 tr:hover {

        background-color: #eee;
    }

    .lb1 {

        display: inline-block;
        line-height: 35px;
        height: 35px;
    }

    .div_f .el-form-item {}
</style>